<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>支部大会信息管理</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="kitten">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.min.css" rel="stylesheet">
		<link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
		<link href="js/lib/layui/css/layui.css" rel="stylesheet">
		<style>
			table {
			  table-layout: fixed;  /* 关键：固定表格布局 */
			  width: 100%;          /* 或指定具体宽度 */
			}
			
			th {
			  overflow: hidden;      /* 隐藏溢出内容 */
			  white-space: nowrap;  /* 禁止文本换行 */
			  text-overflow: ellipsis; /* 显示省略号 */
			  max-width: 200px;     /* 建议设置具体宽度 */
			}
		</style>
	</head>

	<body>
		<div class="container-fluid p-t-15" id="content-page">
			<div class="row" style="padding-bottom:15px;">
				<div class="col-md-2">
					<input placeholder="会议名称" id="nickName" class="form-control" autocomplete="off"
						v-model="selectInfo.title" />
				</div>

				<div class="col-md-4">
					<button type="button" class="btn btn-default" @click="search">搜索</button>
					<button type="button" class="btn btn-cyan" @click="add">新增</button>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="card">
						<div class="card-body">

							<div class="table-responsive">
								<table class="table table-bordered">
									<thead>
										<tr>
											<th>ID</th>
											<th>会议名称</th>
											<th>会议概要</th>
											<th>会议日期</th>
											<th>创建时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(item,index) in serverList">
											<td>{{item.id}}</td>
											<td>{{item.title}}</td>
											<td>{{item.meetingSummary}}</td>
											<td>{{item.meetDate}}</td>
											<td>{{item.createTime|dateFormat}}</td>
											<td>
												<button class="btn btn-primary" type="button" @click="edit(item)">修改
												</button>
												<button class="btn btn-danger" type="button" @click="del(item)">删除
												</button>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div id="pages1"></div>

						</div>
					</div>
				</div>
			</div>

			<!-- 新增 / 修改用户弹层 -->
			<div id="userDetailBox" style="display:none;">
				<div class="col-xs-12">
					<div class="formRow">
						<span style="font-size: 12px;">会议名称：</span>
						<input class="form-control formRowRight" type="text" v-model="info.title" placeholder="培训名称"
							autocomplete="off" />
					</div>
				</div>
				<div class="col-xs-12" style="margin-top: 5px;">
					<div class="formRow">
						<span>日期：</span>
						<input class="form-control formRowRight" type="date" v-model="info.meetDate" placeholder="时间"
							autocomplete="off" />
					</div>
				</div>
				<div class="col-xs-12" style="margin-top: 5px;">
					<div class="formRow">
						<span style="font-size: 12px;">会议概要：</span>
						<textarea class="form-control formRowRight" v-model="info.meetingSummary"></textarea>
					</div>
				</div>
				<div class="col-xs-12">
					<div class="formRow">
						<span style="font-size: 12px;">重要决议：</span>
						<input class="form-control formRowRight" type="text" v-model="info.keyDecisions" placeholder="重要决议"
							autocomplete="off" />
					</div>
				</div>
			
				<div class="col-xs-12" style="margin-top: 5px;">
					<div class="formRow">
						<span style="font-size: 12px;">行动计划：</span>
						<textarea class="form-control formRowRight" v-model="info.actionItems"></textarea>
					</div>
				</div>
				<div class="col-xs-12" style="margin-top: 5px;">
					<div class="formRow">
						<span style="font-size: 12px;">后续工作：</span>
						<textarea class="form-control formRowRight" v-model="info.nextSteps"></textarea>
					</div>
				</div>
			</div>

		</div>


		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="js/jconfirm/jquery-confirm.min.js"></script>
		<script type="text/javascript" src="js/lib/layui/layui.js"></script>
		<script>

			//轻量级框架
			var dataInfo = new Vue({
				el: "#content-page",
				//Vue的数据对象
				data: {
					serverList: [], //数据列表
					info: {

					}, //对象
					selectInfo: {
					},
					image: '',
					users: []
				}, //数据对象结束
				//方法
				methods: {
					GetAll: function(pageNum, pageSize) {
						var me = this;
						$.ajax({
							url: "http://127.0.0.1:8081/meeting/selectPage?pageNum=" + pageNum + "&pageSize=" +
								pageSize,
							async: false,
							type: "POST",
							contentType: 'application/json',
							dataType: 'json',
							data: JSON.stringify(me.selectInfo),
							success: function(json) {
								me.serverList = json.page.records;
							}
						});


					},
					//点击搜索
					search() {
						this.GetAll(0, 10);
						this.selectCount();
					},
					//点击新增
					add() {
						let vm = this;
						vm.info = {
							"applicantId": sessionStorage.getItem("userId")
						};
						$("#userDetailBox").show();
						$.alert({
							title: '新增',
							content: $("#userDetailBox"),
							buttons: {
								confirm: {
									text: '确认',
									btnClass: 'btn-primary',
									action: function() {
										vm.info.fileUrl = vm.image;
										$.ajax({
											url: "http://127.0.0.1:8081/meeting/saveOrUpdate",
											async: false,
											type: "POST",
											contentType: 'application/json',
											dataType: 'json',
											data: JSON.stringify(vm.info),
											success: function(json) {
												if (json.returnCode == 200) {
													layui.use(['layer'], function() {
														layer.msg('新增成功', {
															icon: 1,
															time: 1000 //2秒关闭（如果不配置，默认是3秒）
														}, function() {
															location.reload();
														});
													})
												} else {
													alert("新增失败");
												}
											}
										});
									}
								},
								cancel: {
									text: '关闭',
									action: function() {}
								}
							}
						});
					},
					//点击修改
					edit(item) {
						let vm = this;
						let detail = JSON.stringify(item);
						let useDetail = JSON.parse(detail);
						vm.info = useDetail;
						vm.info.fileUrl = vm.image;
						$("#userDetailBox").show();
						$.alert({
							title: '修改',
							content: $("#userDetailBox"),
							buttons: {
								confirm: {
									text: '确认',
									btnClass: 'btn-primary',
									action: function() {
										console.log(vm.info);
										$.ajax({
											url: "http://127.0.0.1:8081/meeting/saveOrUpdate",
											async: false,
											type: "POST",
											contentType: 'application/json',
											dataType: 'json',
											data: JSON.stringify(vm.info),
											success: function(json) {
												if (json.returnCode == 200) {
													layui.use(['layer'], function() {
														layer.msg('修改成功', {
															icon: 1,
															time: 1000 //2秒关闭（如果不配置，默认是3秒）
														}, function() {
															location.reload();
														});
													})

												} else {
													alert("修改失败");
												}
											}
										});

									}
								},
								cancel: {
									text: '关闭',
									action: function() {}
								}
							}
						});
					},
					selectCount: function() {
						var vms = this;
						$.ajax({
							type: "POST",
							url: "http://127.0.0.1:8081/meeting/selectCount",
							contentType: "application/json",
							data: JSON.stringify(vms.selectInfo),
							dataType: "json",
							success: function(json) {
								layui.use(['laypage', 'layer'], function() {
									var laypage = layui.laypage,
										layer = layui.layer;
									//总页数大于页码总数
									laypage.render({
										elem: 'pages1',
										count: json.count,
										layout: ['count', 'prev', 'next', 'limit',
											'skip'
										],
										jump: function(obj) {
											vms.GetAll(obj.curr - 1, obj
												.limit);
										}
									});
								})
							}
						});

					},
					//点击删除
					del(item) {
						let vm = this;
						console.log(item);
						layui.use('layer', function() {
							layer.confirm("请问是否确定删除？", {
								btn: ["确定", "取消"] //按钮
							}, function() {
								layer.closeAll('dialog');
								$.ajax({
									url: "http://127.0.0.1:8081/meeting/delete?id=" + item.id,
									async: false,
									type: "DELETE",
									contentType: 'application/json',
									dataType: 'json',
									data: vm.user,
									success: function(json) {
										vm.GetAll(0, 10);
										vm.selectCount();
										layer.closeAll('dialog');
									}
								});


							}, function() {});
						});
					},

				}, //方法结束
				created: function() {
					var vm = this;
					vm.GetAll(0, 10);
					vm.selectCount();
					vm.selectUser();
				}, //初始加载方法结束
				filters: {
					dateFormat: function(dateStr, pattern = '') {
						var dt = new Date(dateStr)
						// yyyy-mm-dd
						var y = dt.getFullYear()
						var m = (dt.getMonth() + 1).toString().padStart(2, '0')
						var d = dt.getDate().toString().padStart(2, '0')

						if (pattern.toLowerCase() === 'yyyy-mm-dd') {
							return `${y}-${m}-${d}`
						} else {
							var hh = dt.getHours()
							var mm = dt.getMinutes().toString().padStart(2, '0')
							var ss = dt.getSeconds().toString().padStart(2, '0')
							return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
						}
					}

				}
			}); //vue结束
		</script>
	</body>
</html>